<!DOCTYPE html>
<html>
<head>
    <title>设备IP监控面板</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .device-card { 
            border: 1px solid #ddd; 
            padding: 15px; 
            margin-bottom: 10px; 
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .device-name { font-weight: bold; font-size: 1.2em; }
        .device-id { color: #666; font-size: 0.9em; }
        .device-ip { color: #2a6496; font-size: 1.1em; margin: 5px 0; }
        .last-seen { color: #888; font-size: 0.9em; }
    </style>
</head>
<body>
    <h1>设备IP监控面板</h1>
    
    <div id="devices-container">
        {% for device_id, info in devices.items() %}
        <div class="device-card">
            <div class="device-name">{{ info.device_name }}</div>
            <div class="device-id">ID: {{ device_id }}</div>
            <div class="device-ip">IP地址: {{ info.ip }}</div>
            <div class="last-seen">最后上报时间: {{ info.last_seen }}</div>
        </div>
        {% else %}
        <p>没有设备注册</p>
        {% endfor %}
    </div>
    
    <script>
        // 每30秒自动刷新页面
        setInterval(() => {
            window.location.reload();
        }, 30000);
    </script>
</body>
</html>